<template>
  <div>
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['2']" :router= true>
        <el-submenu :index="JSON.stringify(item.id)" v-for="item in menus" :key="item.id">
          <template slot="title"><i class="el-icon-message"></i>{{ item.auth_name }}</template>
          <el-menu-item-group>
            <el-menu-item :index="v.auth_path" v-for="v in item.children" :key="v.id">{{ v.auth_name }}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {}
  },
  methods: {},
  computed: {
    ...mapState(['menu']),
    menus() {
      const arr = []
      this.menu.forEach((item) => {
        const obj = {
          id: item.id,
          auth_name: item.auth_name,
          children: []
        }
        item.children.forEach((v) => {
          if (!v.auth_name.includes('修改') && !v.auth_name.includes('删除')) {
            obj.children.push(v)
          }
        })
        arr.push(obj)
      })
      return arr
    }
  }
}
</script>

<style>
.el-aside {
  color: #333;
}
</style>
